<template>
<div>
   <div style="height: 60px; display: flex;justify-content: space-between;">
      <div>
      <proSelect
        :optionsData="optionsData"
        :defaultSelectValue="0"
        v-model:select-value="left_value"
        :width="150"
      >
      </proSelect>
      <proSelect
        :optionsData="companyOptionsData"
        :defaultSelectValue="0"
        v-model:select-value="left_value"
        :width="150"
      >
      </proSelect>
      <el-input
        placeholder="请输入"
        v-model="inputValue"
        size="large"
        class="searchInput"
      >
       <template #suffix>
        <el-icon class="el-input__icon"><search /></el-icon>
      </template>
      </el-input>
      </div>
      <el-button type="primary" @click="addSjlr" class="searchBtn"
        ><el-icon><Plus /></el-icon>事件录入</el-button
      >
    </div>
 <CustomTableVue
    :showLabel="false"
    :field-list="fieldList"
    :table-data="tableData"
    height="calc(85% - 80px)!important"
  >
   <template #jump="slotProps">
        <div class="btn" style="display: flex">
          <div @click="openDailog(slotProps.row.id)">
            <el-icon>
              <Edit />
            </el-icon>
          </div>
          <div @click="openDailog(slotProps.row.id)">
            <el-icon><Warning /></el-icon>
          </div>
           <div @click="openDailog(slotProps.row.id,1)">
            <el-icon><SwitchButton /></el-icon>
          </div>
        </div>
      </template>
  </CustomTableVue>
</div>
</template>

<script lang="ts" setup>
import CustomTableVue from "@/components/common/table/CustomTable.vue";
import Mitt from "@/utils/mitt";
import proSelect from "@/components/project/proSelect.vue";
const optionsData = [
  { label: "洪涝灾害", value: 0 },
  { label: "自然灾害", value: 1 },
  { label: "雨雪冰冻灾害", value: 2 },
  { label: "突发环境事件", value: 3 },
];
const companyOptionsData = [
  { label: "a制定单位", value: 0 },
  { label: "b制定单位", value: 1 },
  { label: "c制定单位", value: 2 },
  { label: "d制定单位", value: 3 },
];
const left_value = "";
const inputValue = "";
const fieldList: any = [
    {
      name: "name",
      label: "名称",
      type: "TEXT",
    },
    {
      name: "address",
      label: "地址",
      type: "TEXT",
    },
    {
      name: "date",
      label: "时间",
      type: "TEXT",
    },
    {
      name: "condition",
      label: "状态",
      type: "TEXT",
    },
    {
      name: "types",
      label: "类别",
      type: "TEXT",
    },
    {
      name: "level",
      label: "等级",
      type: "TEXT",
    },
    {
      name: "pushDate",
      label: "上报时间",
      type: "TEXT",
    },
    {
      name: "jump",
      label: "操作",
      type: "SLOT",
    }
];

const tableData = ref([]);
const props = defineProps({
  selectValue: {
    type: String,
    default: ''
  },
});
const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    const obj = jsonData.value.yjzy.yjsjlb
    if(props.selectValue){
        data = obj[props.selectValue];

    }else{
        Object.values(obj).forEach((arr: any) => {
            data.push(...arr)
        })
    }
  } catch (error) {}

  return data;
});

watch(
  () => current.value,
  (val) => {
    if (val) {
     tableData.value = val
     
    }else{
        tableData.value = []
    }
  }
);

function addSjlr() {
  Mitt.emit("js-addSjlr");
}
function openDailog(id,type){
  if(type){
   Mitt.emit("js-openPro");   
   return
  }
 Mitt.emit("js-projectInfo"); 
}
</script>
<style scoped lang="less">
/deep/ .searchForm {
  .el-input__wrapper {
    font-size: 20px;
    background: rgba(48, 82, 95, 0.62) !important;
    box-shadow: 0 0 0 1px #4fb9cf inset !important;
  }
}
.searchInput {
  height: 40px;
  line-height: 40px;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #8ba6ad; /*  */
  width: 240px;
}
.searchBtn{
  background: rgba(27,251,250,0.23);
border-radius: 4px 4px 4px 4px;
border: 1px solid #1BFBFA;
color: #1BFBFA;
line-height: 40px;
height: 40px;
}
.btn {
  color: #1bfbfa;
  font-weight: 500;
  justify-content: center;
  font-size: 24px;
  div {
    margin-right: 10px;
  }
}
</style>
